<template>
  <van-popup
    :show="visible"
    position="bottom"
    :style="{ height: '100%', overflow: 'hidden' }"
    closeable
    @close="beforeClose"
  >
    <div class="pick-major-container">
      <div class="college">
        <img
          class="college-icon"
          :src="currentCollegeItem.collegeInfo.icon"
          alt=""
        />
        <div class="college-info">
          <div class="college-name">
            {{ currentCollegeItem.collegeInfo.name }}
          </div>
          <div class="college-recruit">
            <span>
              {{ currentCollegeItem.collegeInfo.collegeType }} /
              {{ currentCollegeItem.collegeInfo.natureName }}</span
            >
            <span> {{ currentCollegeItem.collegeInfo.cityName }}</span>
            <span
              >院校代码
              {{ currentCollegeItem.collegeInfo?.detail?.gbCode }}</span
            >
            <span>{{
              currentCollegeItem.collegeInfo.dualClassName.replace(/,/g, ' / ')
            }}</span>
          </div>
        </div>
      </div>
      <div class="major-group">
        <div class="major-group-title">
          <div class="line-one">院校</div>
          <div class="line-two">专业组</div>
        </div>
        <div class="major-group-list">
          <div
            :class="{
              'major-group-item': true,
              active: item.cpgId == selectedGroupItem.cpgId,
            }"
            v-for="(item, index) in majorGroupList"
            :key="index"
            @click="handleSelectGroup(item)"
          >
            <div class="major-group-item-name">{{ item.groupName }}</div>
          </div>
        </div>
      </div>
      <div class="major">
        <div class="header">
          <div
            :class="['header-item', 'headerText' + index]"
            v-for="(item, index) in headerList"
            :key="index"
            :style="{
              width: item.width,
              textAlign: item.textAlign,
              padding: item.padding,
            }"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="major-list">
          <template v-if="majorList.length">
            <div
              class="son-level"
              v-for="(_item, _index) in majorList"
              :key="_index"
            >
              <div class="first-column">
                <div
                  v-if="_item.matchRate"
                  :class="[
                    'label',
                    _item.matchRate > 79
                      ? 'success'
                      : _item.matchRate > 49
                      ? 'warning'
                      : 'danger',
                  ]"
                >
                  {{
                    _item.matchRate > 79
                      ? '保'
                      : _item.matchRate > 49
                      ? '稳'
                      : '冲'
                  }}
                </div>
                <span :class="_item.matchRate ? '' : 'center-span'"
                  >{{ _item.matchRate || '-'
                  }}<span class="question" v-if="_item.matchRate">%</span></span
                >

                <div class="risk" v-if="_item.matchRate">
                  {{
                    _item.matchRate > 79
                      ? '较低风险'
                      : _item.matchRate > 64
                      ? '中低风险'
                      : _item.matchRate > 49
                      ? '中等风险'
                      : '较高风险'
                  }}
                </div>
              </div>
              <div class="second-column">
                <div class="top">
                  <div class="name">{{ _item.groupName }}</div>
                </div>
                <div class="middle">
                  {{ _item.showContent }}
                </div>
                <div class="school-desc">
                  <span v-if="_item.proCode"
                    >专业代码：{{ _item.proCode }}</span
                  >
                  <span
                    >选科要求：{{ getSubjectName(_item.limitSubject) }}</span
                  >
                </div>
              </div>
              <div class="third-column">
                <div class="num">
                  <span>{{ _item.plannedNum }}</span
                  >人
                </div>
                <div class="subject">
                  {{ _item.year }} <span v-if="_item.price">￥</span
                  >{{ _item.price }}
                </div>
              </div>
              <div class="fourth-column">
                <div
                  class="fourth-column-item"
                  v-for="(ele, ele_index) in thirdColumnLabelListForSon"
                  :key="ele_index"
                >
                  {{ ele }}
                  <div
                    class="tooltip-wrapper"
                    v-if="ele == '最低分与省控线的差距'"
                  >
                    <img
                      v-if="ele == '最低分与省控线的差距'"
                      ref="questionLogoRef"
                      class="question-icon"
                      :src="questionLogo"
                      @click="showTooltip(1, _item.cpgId)"
                    />
                    <div
                      class="tooltip-content"
                      v-if="tooltipStates[`${_item.cpgId}-1`]"
                    >
                      专业组里的最低分与省控线差距大，录取概率相对较低。专业组里的最低分与省控线差距小，录取概率相对较高。
                    </div>
                  </div>
                  <div class="tooltip-wrapper" v-if="ele == '我的排名竞争力'">
                    <img
                      v-if="ele == '我的排名竞争力'"
                      class="question-icon"
                      :src="questionLogo"
                      @click="showTooltip(2, _item.cpgId)"
                    />
                    <div
                      class="tooltip-content"
                      v-if="tooltipStates[`${_item.cpgId}-2`]"
                    >
                      反映了考生当前成绩在当前院校的竞争力高低，等效位差只用于参考位次在历年竞争力情况，选择志愿时参考录取概率进行填报。
                    </div>
                  </div>
                </div>
              </div>
              <div class="fifth-column">
                <template v-if="_item.previousData[0]">
                  <div class="fifth-column-item">
                    {{ _item.previousData[0].admissionNum || '-' }}
                  </div>
                  <div class="fifth-column-item">
                    {{ _item.previousData[0].lineDiffNum || '-' }}
                  </div>
                  <div class="fifth-column-item">
                    {{ _item.previousData[0].minScore || '-' }}
                  </div>
                  <div class="fifth-column-item">
                    {{ _item.previousData[0].minRank || '-' }}
                  </div>
                  <div class="fifth-column-item">
                    <span
                      :style="{
                        color:
                          _item.previousData[0].competenceNum > 0
                            ? '#11B414'
                            : '#F76D32',
                      }"
                      >{{
                        _item.previousData[0].competenceNum > 0
                          ? '高'
                          : _item.previousData[0].competenceNum < 0
                          ? '低'
                          : ''
                      }}{{
                        _item.previousData[0].competenceNum == null
                          ? '-'
                          : Math.abs(_item.previousData[0].competenceNum) ==
                              0 && _item.previousData[0].competenceNum != null
                          ? '持平'
                          : Math.abs(_item.previousData[0].competenceNum)
                      }}</span
                    >
                  </div>
                </template>
                <template v-else>
                  <div class="fifth-column-item no-data">-</div>
                </template>
              </div>
              <div class="sixth-column">
                <template v-if="_item.previousData[1]">
                  <div class="sixth-column-item">
                    {{ _item.previousData[1].admissionNum || '-' }}
                  </div>
                  <div class="sixth-column-item">
                    {{ _item.previousData[1].lineDiffNum || '-' }}
                  </div>
                  <div class="sixth-column-item">
                    {{ _item.previousData[1].minScore || '-' }}
                  </div>
                  <div class="sixth-column-item">
                    {{ _item.previousData[1].minRank || '-' }}
                  </div>
                  <div class="sixth-column-item">
                    <span
                      :style="{
                        color:
                          _item.previousData[1].competenceNum > 0
                            ? '#11B414'
                            : '#F76D32',
                      }"
                      >{{
                        _item.previousData[1].competenceNum > 0
                          ? '高'
                          : _item.previousData[1].competenceNum < 0
                          ? '低'
                          : ''
                      }}{{
                        _item.previousData[1].competenceNum == null
                          ? '-'
                          : Math.abs(_item.previousData[1].competenceNum) ==
                              0 && _item.previousData[1].competenceNum != null
                          ? '持平'
                          : Math.abs(_item.previousData[1].competenceNum)
                      }}</span
                    >
                  </div>
                </template>
                <template v-else>
                  <div class="sixth-column-item no-data">-</div>
                </template>
              </div>
              <div class="seventh-column">
                <template v-if="_item.previousData[2]">
                  <div class="seventh-column-item">
                    {{ _item.previousData[2].admissionNum || '-' }}
                  </div>
                  <div class="seventh-column-item">
                    {{ _item.previousData[2].lineDiffNum || '-' }}
                  </div>
                  <div class="seventh-column-item">
                    {{ _item.previousData[2].minScore || '-' }}
                  </div>
                  <div class="seventh-column-item">
                    {{ _item.previousData[2].minRank || '-' }}
                  </div>
                  <div class="seventh-column-item">
                    <span
                      :style="{
                        color:
                          _item.previousData[2].competenceNum > 0
                            ? '#11B414'
                            : '#F76D32',
                      }"
                      >{{
                        _item.previousData[2].competenceNum > 0
                          ? '高'
                          : _item.previousData[2].competenceNum < 0
                          ? '低'
                          : ''
                      }}{{
                        _item.previousData[2].competenceNum == null
                          ? '-'
                          : Math.abs(_item.previousData[2].competenceNum) ==
                              0 && _item.previousData[2].competenceNum != null
                          ? '持平'
                          : Math.abs(_item.previousData[2].competenceNum)
                      }}</span
                    >
                  </div>
                </template>
                <template v-else>
                  <div class="seventh-column-item no-data">-</div>
                </template>
              </div>
              <div class="eighth-column">
                <div
                  class="unfold-btn"
                  :class="{ 'unfold-btn-active': _item.selectNum > 0 }"
                  @click="submit(_item, currentCollegeItem)"
                >
                  {{ getSubmitBtnName(_item, currentCollegeItem) }}
                </div>
              </div>
            </div>
          </template>
          <div class="empty-container" v-else>
            <Empty />
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive, onMounted, watch, onUnmounted, computed } from 'vue';
import { useVolunteerStore } from '@/store/volunteer';
import { showConfirmDialog, showToast } from 'vant';
import { useRoute } from 'vue-router';
import Empty from '@/components/Empty.vue';
import {
  getProByCollege,
  getProByCollegeGroup,
  volunteerSave,
  volunteerDelete,
} from '@/api/volunteer.js';
import { getSubjectName } from '@/utils/subjectData';

const emit = defineEmits([
  'updateCurrentCollege',
  'update:visible',
  'refreshData',
]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  currentCollegeItem: {
    type: Object,
    default: () => {},
  },
});

const store = useVolunteerStore();
const volunteerInfo = computed(() => store.volunteerInfo);

const questionLogo =
  'https://img3.job1001.com/ypMp/elan/images/career/collegeVolunteer/question.png';

const headerList = [
  {
    label: '录取概率',
  },
  {
    label: '专业名称',
  },
  {
    label: '2024招生计划',
  },
  {
    label: '历年',
  },
  {
    label: '2024',
  },
  {
    label: '2023',
  },
  {
    label: '2022',
  },
  {
    label: '操作',
  },
];

const thirdColumnLabelListForSon = [
  '录取人数',
  '最低分与省控线的差距',
  '最低分',
  '最低位次',
  '我的排名竞争力',
];

const selectedGroupItem = ref({});
const majorGroupList = ref([]);
const majorList = ref([]);

const getSubmitBtnName = (_item, item) => {
  if (_item.selectNum > 0) {
    return '已填' + _item.selectNum;
  } else {
    return '填报';
  }
};

const tooltipStates = reactive({});

const closeAllTooltips = () => {
  Object.keys(tooltipStates).forEach((key) => {
    tooltipStates[key] = false;
  });
};

const handleClickOutside = (event) => {
  if (
    !event.target.closest('.tooltip-content') &&
    !event.target.closest('.question-icon')
  ) {
    closeAllTooltips();
  }
};

const handleScroll = () => {
  closeAllTooltips();
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
  const majorList = document.querySelector('.major-list');
  if (majorList) {
    majorList.addEventListener('scroll', handleScroll);
  }
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
  const majorList = document.querySelector('.major-list');
  if (majorList) {
    majorList.removeEventListener('scroll', handleScroll);
  }
});

const showTooltip = (index, itemId) => {
  const key = `${itemId}-${index}`;
  tooltipStates[key] = !tooltipStates[key];
  // 关闭其他所有tooltip
  Object.keys(tooltipStates).forEach((k) => {
    if (k !== key) {
      tooltipStates[k] = false;
    }
  });
};

const submit = async (_item, item) => {
  if (_item.selectNum > 0) {
    const params = {
      volunteerId: _item.volunteerId,
    };
    const res = await volunteerDelete(params);
    if (res.code == 200) {
      if (
        props.currentCollegeItem.groupCode == selectedGroupItem.value.groupCode
      ) {
        // 删除志愿后，如果当前专业组没有志愿，则志愿数减一，如果已经有志愿，则志愿数不变，如果是0，则志愿数volunteerNum也是0
        const temp = {
          selectNum: --props.currentCollegeItem.selectNum,
          volunteerNum:
            --props.currentCollegeItem.selectNum == 0
              ? 0
              : props.currentCollegeItem.volunteerNum,
        };
        emit('updateCurrentCollege', temp);
        emit('refreshData');
      }
      showToast(res.status_desc || ' 删除志愿成功！');
    } else {
      showToast(res.status_desc || ' 删除志愿失败！');
    }
  } else {
    //添加志愿填报
    const params = {
      rankNum: volunteerInfo.value.position,
      subject: volunteerInfo.value.relSubject,
      score: volunteerInfo.value.score,
      regionId: volunteerInfo.value.regionId,
      cateType: props.currentCollegeItem.collegeType,
      cpgId: _item.cpgId,
      cpgParentId: _item.parentId,
    };
    const res = await volunteerSave(params);
    if (res.code == 200) {
      if (
        props.currentCollegeItem.groupCode == selectedGroupItem.value.groupCode
      ) {
        const temp = {
          selectNum: res.data.selectNum,
          volunteerNum: res.data.volunteerNum,
        };
        emit('updateCurrentCollege', temp);
        emit('refreshData');
      }
      showToast(res.status_desc || ' 添加志愿填报成功！');
    } else {
      showToast(res.status_desc || ' 添加志愿填报失败！');
    }
  }
  reqGetMajorList();
};

const plannedNum = ref(0);
const handleSelectGroup = (item) => {
  selectedGroupItem.value = item;
  plannedNum.value = item.plannedNum;
  reqGetMajorList();
};

// 获取去年的年份
const getLastYear = () => {
  const currentDate = new Date();
  return currentDate.getFullYear() - 1;
};

headerList[2].label = `${volunteerInfo.value.planYear}招生计划`;
const defaultYear = volunteerInfo.value.defaultYear || getLastYear();
headerList[4].label = defaultYear;
headerList[5].label = defaultYear - 1;
headerList[6].label = defaultYear - 2;

const createDefaultYearData = () => ({
  admissionNum: '', // 录取人数
  lineDiffNum: '', // 最低分与省控线的差距
  minScore: '', // 最低录取分数
  minRank: '', // 录取最低位次
  competenceNum: null, //我的排名竞争力
});

const reqGetMajorList = async () => {
  const params = {
    userScore: volunteerInfo.value.score,
    collegeId: props.currentCollegeItem.collegeId,
    cateType: props.currentCollegeItem.collegeType,
    subjectType: props.currentCollegeItem.subjectType,
    localRegionId: props.currentCollegeItem.localRegionId,
    searchParentId: selectedGroupItem.value.cpgId,
    groupLevel: 2,
    groupCode: selectedGroupItem.value.groupCode,
    pageNo: 1,
    pageSize: 999,
    subject: volunteerInfo.value.relSubject,
    orderBy: '10',
    searchAllowSubject:volunteerInfo.value.relSubject,
  };
  const res = await getProByCollegeGroup(params);
  if (res.code == 200) {
    res.data.forEach((item) => {
      item.previousData = Array(3)
        .fill()
        .map(() => createDefaultYearData());
      if (item.yearData) {
        const firstYearData = item.yearData.find(
          (_item) => _item.year == defaultYear
        );
        item.previousData[0] = getYearData(firstYearData?.data);
        const secondYearData = item.yearData.find(
          (_item) => _item.year == defaultYear - 1
        );
        item.previousData[1] = getYearData(secondYearData?.data);
        const thirdYearData = item.yearData.find(
          (_item) => _item.year == defaultYear - 2
        );
        item.previousData[2] = getYearData(thirdYearData?.data);
      }
    });
    majorList.value = res.data;
  }
};

const keyList = [
  'admissionNum',
  'lineDiffNum',
  'minScore',
  'minRank',
  'competenceNum',
];
const getYearData = (data) => {
  if (!data) return null;
  const isNoData = keyList.every((key) => data[key] == null || data[key] == '');
  return isNoData ? null : data;
};

const reqGetMajorGroupList = async () => {
  const params = {
    userScore: volunteerInfo.value.score,
    collegeId: props.currentCollegeItem.collegeId,
    cateType: props.currentCollegeItem.collegeType,
    subjectType: props.currentCollegeItem.subjectType,
    localRegionId: props.currentCollegeItem.localRegionId,
    subject: volunteerInfo.value.relSubject,
  };
  const res = await getProByCollege(params);
  if (res.code == 200) {
    majorGroupList.value = res.data;
    if (res.data.length) {
      const temp = res.data.find(
        (item) => item.groupCode == props.currentCollegeItem.groupCode
      );
      handleSelectGroup(temp);
      setTimeout(() => {
        const selectedItem = document.querySelector('.major-group-item.active');
        if (selectedItem) {
          selectedItem.scrollIntoView({
            behavior: 'smooth',
            block: 'nearest',
            inline: 'start',
          });
        }
      }, 100);
    }
  }
};

const beforeClose = () => {
  emit('update:visible', false);
};

watch(
  () => props.currentCollegeItem,
  (newVal) => {
    if (newVal) {
      reqGetMajorGroupList();
    }
  }
);
</script>

<style lang="scss" scoped>
.pick-major-container {
  background: #ebf5ff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .college {
    display: flex;
    align-items: center;
    padding: 32px 32px 0 32px;
    margin-bottom: 24px;

    &-icon {
      width: 52px;
      height: 52px;
      margin-right: 14px;
      border-radius: 50%;
    }

    &-info {
      .college-name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28px;
        color: #000;
        line-height: 28px;
        margin-bottom: 8px;
      }

      .college-recruit {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #777;
        line-height: 21px;

        span {
          margin-right: 24px;
        }
      }
    }
  }
  .major-group {
    display: flex;
    align-items: center;
    padding: 0 32px;
    min-height: 70px;

    .major-group-title {
      height: 42px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #777;
      line-height: 21px;
      margin-right: 20px;
      flex-shrink: 0;
      div {
        text-align: center;
      }
    }

    .major-group-list {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    .major-group-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 14px;
      border: 1px solid #cccccc;
      margin-right: 12px;
      cursor: pointer;
      flex-shrink: 0;
      &.active {
        background: $primary-color;
        border: 1px solid $primary-color;
        .major-group-item-name {
          color: white;
        }

        .major-group-item-rate {
          background: #ffffff;
          color: $primary-color;
        }
      }

      &-name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 22px;
        color: #333333;
        line-height: 21px;
        text-align: left;
        font-style: normal;
      }

      &-rate {
        margin-top: 6px;
        padding: 2px 4px;
        background: #e9e9e9;
        border-radius: 4px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 19px;
        color: #777777;
        text-align: center;
      }
    }
  }

  .major {
    padding: 0 32px;
    margin-top: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .header {
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      background: #f4f4f4;
      padding: 12px 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      &-item {
        box-sizing: border-box;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 19px;
        color: #666666;
      }

      .headerText0 {
        width: 6%;
        text-align: left;
        padding: 0 0 0 18px;
      }
      .headerText1 {
        width: 36%;
        text-align: left;
        padding: 0 0 0 18px;
      }
      .headerText2 {
        width: 10%;
        text-align: center;
        padding: 0 20px 0 0;
      }
      .headerText3 {
        width: 15%;
        text-align: right;
        padding: 0 20px 0 0;
      }
      .headerText4 {
        width: 8%;
        text-align: left;
        padding: 0 0 0 18px;
      }
      .headerText5 {
        width: 8%;
        text-align: left;
        padding: 0 0 0 18px;
      }
      .headerText6 {
        width: 8%;
        text-align: left;
        padding: 0 0 0 18px;
      }
      .headerText7 {
        text-align: left;
        padding: 0 0 0 24px;
      }
    }

    .major-list {
      flex: 1;
      overflow-y: auto;
      .empty-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
      }
    }
  }

  .son-level {
    background: white;
    border-bottom: 1px solid #dee8f4;
    display: flex;
    flex-direction: row;
  }

  .first-column {
    width: 6%;
    box-sizing: border-box;
    border-right: 1px solid #e7e7e7;
    padding: 10px 0 18px 18px;
    font-size: 20px;
    color: #222222;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    span {
      font-weight: bold;
      font-size: 28px;
      color: #222222;
    }

    .center-span {
      margin-left: 20px;
      font-weight: bold;
      font-size: 26px;
      color: #222222;
    }

    .question {
      font-weight: bold;
      font-size: 22px;
      color: #222222;
      margin-left: 3px;
      font-family: D-DIN-PRO-600-SemiBold;
    }

    .label {
      margin: 10px 0 10px 0;
      padding: 6px;
      color: #ffffff;
      font-size: 18px;
      font-weight: bold;
      &.success {
        background-color: #08c687;
      }
      &.warning {
        background-color: #ff9e3b;
      }
      &.danger {
        background-color: #f75a3e;
      }
    }

    .risk {
      margin-top: 10px;
      font-weight: 400;
      font-size: 17px;
      color: #777777;
    }
  }

  .second-column {
    width: 36%;
    box-sizing: border-box;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;

      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 22px;
        color: #000000;
      }
    }

    .middle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #777777;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 12px;
      line-height: 24px;
    }

    .school-desc {
      margin-top: 11px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 19px;
      color: #777777;
      line-height: 18px;
      text-align: left;
      font-style: normal;

      span {
        margin-right: 57px;
        &:last-of-type {
          margin: 0;
        }
      }
    }
  }

  .third-column {
    width: 10%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e7e7e7;

    .num {
      span {
        font-size: 24px;
        color: #222222;
        font-weight: bold;
        font-family: D-DIN-PRO-600-SemiBold;
      }
      font-size: 17px;
    }

    .subject {
      font-weight: 400;
      font-size: 17px;
      color: #777777;
      margin-top: 16px;
    }
  }

  .fourth-column {
    width: 15%;
    box-sizing: border-box;
    border-right: 1px solid #e7e7e7;
    padding: 0 20px 0 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    justify-content: space-evenly;
    color: #999999;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 20px;

    &-item {
      height: 20px;
      line-height: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;

      img {
        width: 12px;
        height: 12px;
        margin-left: 2px;
        cursor: pointer;
      }
    }
    .tooltip-wrapper {
      position: relative;
      .tooltip-content {
        font-size: 22px;
        width: 220px;
        padding: 12px 24px;
        position: absolute;
        top: 18px;
        left: 18px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        z-index: 1000;
        color: #333;
        line-height: 26px;
      }
    }
  }

  .fifth-column,
  .sixth-column,
  .seventh-column {
    width: 8%;
    box-sizing: border-box;
    border-right: 1px solid #e7e7e7;
    padding: 0 7px 0 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    justify-content: space-evenly;
    color: #222222;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 20px;

    &-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 17px;
      line-height: 17px;

      img {
        width: 14px;
        height: 14px;
      }
    }
    .no-data {
      color: #999999;
    }
  }

  .eighth-column {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .unfold-btn {
      width: 82px;
      height: 32px;
      background: #eef5ff;
      border-radius: 4px;
      border: 1px solid $primary-color;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: $primary-color;
      cursor: pointer;

      img {
        width: 18px;
        height: 18px;
        margin-left: 6px;
      }

      &-active {
        width: 90px;
        font-size: 20px;
        background: $primary-color;
        color: #fff;
      }
    }
  }
}
</style>
